<template>
  <el-dialog
    :title="title"
    class="notice-box"
    :visible.sync="visible"
    width="700px">
    <el-form class="form" label-position="top" label-width="100px" :model="notice">
      <el-form-item label="通知文案">
        <el-input
          type="textarea"
          placeholder="请输入通知文案"
          v-model="notice.noticeMsg"
          maxlength="200"
          :autosize="{minRows: 4}"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <div class="add-detail">
          <div class="switch-detail">
            <span>是否增加详情图</span>
            <el-switch
              v-model="notice.picStatus"
              active-color="#409eff"
              inactive-color="#cccccc">
            </el-switch>
          </div>
          <div class="upload" v-if="notice.picStatus">
            <uploadOwnImg v-model="notice.detailPic" width="140px" height="140px"/>
            <div class="detail-set">
              <div class="set-name">详情图用户侧文案</div>
              <el-input v-model="notice.picContent" placeholder="添加文案" size="mini"></el-input>
              <div class="erw-share">
                <span>二维码分享</span>
                <el-switch
                  v-model="notice.qrcodeSwitch"
                  active-color="#409eff"
                  inactive-color="#cccccc">
                </el-switch>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="场次类型选择">
        <el-checkbox-group v-model="notice.sessionType">
          <el-checkbox :label="1">普通场</el-checkbox>
          <el-checkbox :label="2">大神场</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="发布频次">
        <el-checkbox-group v-model="notice.releaseFrequency">
          <el-checkbox :label="1">进房</el-checkbox>
          <el-checkbox :label="2">结束后返回房间</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="notice.status">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="saveNotice">提 交</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    noticeData: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      defalut: false
    },
    title: {
      type: String,
      default: '新增公屏通知'
    }
  },
  data () {
    return {
      visible: this.show,
      notice: {},
      defaultNotice: {
        noticeMsg: '',
        picStatus: true,
        detailPic: '',
        qrcodeSwitch: true,
        picContent: '',
        sessionType: [1],
        releaseFrequency: [1],
        status: 1
      },
      pic: {
        picWidth: 0,
        picHeight: 0
      }
    }
  },
  watch: {
    show (show) {
      this.visible = show
    },
    visible (show) {
      this.$emit('update:show', show)
    },
    'notice.detailPic': function (pic) {
      const img = new Image()
      img.src = pic
      img.onload = () => {
        this.pic = {
          picWidth: img.width,
          picHeight: img.height
        }
      }
    },
    noticeData: {
      handler: function (data) {
        if (data && data.noticeMsg) {
          this.notice = JSON.parse(JSON.stringify(data))
          console.log('notice', this.notice)
          return
        }
        this.notice = this.defaultNotice
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    saveNotice () {
      let noticeData = JSON.parse(JSON.stringify(this.notice))
      if (this.notice.sessionType.length > 1) {
        noticeData.sessionType = 0
      } else {
        noticeData.sessionType = this.notice.sessionType[0]
      }
      if (this.notice.releaseFrequency.length > 1) {
        noticeData.releaseFrequency = 0
      } else {
        noticeData.releaseFrequency = this.notice.releaseFrequency[0]
      }
      noticeData.picStatus = this.notice.picStatus ? 1 : 0
      noticeData.qrcodeSwitch = this.notice.qrcodeSwitch ? 1 : 0
      this.saveData = Object.assign(noticeData, this.pic)
      this.$emit('saveAddNotice', this.saveData)
      this.visible = false
    }
  }
}
</script>
<style lang="scss">
.notice-box{
  .form{
    padding: 0 10px;
  }
  .add-detail {
    margin: 10px 0;
    .switch-detail{
      span{
        margin-right: 10px;
        font-weight: 500;
        font-size: 15px;
      }
    }
    .upload{
      display: flex;
      .detail-set{
        margin-left: 20px;
        .set-name{
          line-height: 12px;
          margin-bottom: 5px;
        }
        .erw-share{
          span{
            margin-right: 10px;
          }
        }
      }
    }
  }
  .el-form--label-top .el-form-item__label{
    font-weight: 500;
    font-size: 15px;
  }
  .el-form-item__label{
    padding: 0;
    line-height: 30px;
  }
  .el-form-item{
    margin-bottom: 0px;
  }
}
</style>
